<template>
    <div>
        <el-form :model="ruleForm" label-width="140px">
            <div class="container">
                <h3 style="margin-bottom: 20px">产品信息</h3>
                <el-row class="demo-ruleForm">
                    <el-col :span="12">
                        <el-form-item label="产品类型：">
                            {{ruleForm.materialType}}
                        </el-form-item>
                        <!-- <el-form-item label="规格：" v-if="ruleForm.materialType != '提取饮片'">
                            {{ruleForm.spec}}
                        </el-form-item> -->
                        <el-form-item label="存货代码：" v-if="ruleForm.materialType != '提取饮片'">
                            {{ruleForm.inventoryCode}}
                        </el-form-item>

                        <el-form-item label="物料代码：" >
                            {{ruleForm.materialCode}}
                        </el-form-item>
                        <el-form-item label="生产负责人：">
                            {{ruleForm.principalUser}}
                        </el-form-item>
                        <el-form-item label="生产批号：">
                            {{ruleForm.batch}}
                        </el-form-item>
                        <el-form-item label="仓库：">
                            {{ruleForm.warehouse}}
                        </el-form-item>
                        <!-- <el-form-item label="生产指令：">
                            {{ruleForm.directive}}
                        </el-form-item> -->
                        <el-form-item label="生产场景：" style="width:500px">
                            <span v-if="ruleForm.sceneUrl == ''"></span>
                            <img v-else :src="$store.state.imageUrls+ruleForm.sceneUrl" width="150" @click="handlecheck(ruleForm.sceneUrl)" />
                        </el-form-item>
                        <el-form-item label="质量标准：" style="width:500px">
                            {{ruleForm.qualityStandard}}
                            <!-- <textarea v-model="qualityStandard" name="" id="" cols="70" rows="6"></textarea> -->
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="名称：">
                            {{ruleForm.breedName}}
                        </el-form-item>
						<el-form-item label="产地：">
						    {{ruleForm.address}}
						</el-form-item>
                        <el-form-item label="发药机编码：" v-if="ruleForm.materialType != '提取饮片'">
                            {{ruleForm.dispenserCode}}
                        </el-form-item>
                        <el-form-item label="生产日期：">
                            {{ruleForm.time}}
                        </el-form-item>

                        <el-form-item label="生产工艺：" v-if="ruleForm.materialType != '颗粒包装'">
                            {{ruleForm.technique}}
                        </el-form-item>
                        <el-form-item label="实际产量：">
                            {{ruleForm.totalNumber}}{{ruleForm.units}}
                        </el-form-item>
                        <el-form-item label="生产堆密度：" v-if="ruleForm.materialType=='配方颗粒(颗粒)'">
                            {{ruleForm. productBulkDensity}} g/cm³
                        </el-form-item>
                        <!-- <el-form-item label="绑定设备：">
                            {{ruleForm.equipment}}
                        </el-form-item> -->
                        <el-form-item label="产品图片：" style="width:500px">
                            <span v-if="ruleForm.productUrl == ''"></span>
                            <img v-else :src="$store.state.imageUrls+ruleForm.productUrl" width="150" @click="handlecheck(ruleForm.productUrl)" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
            <div class="container" style="margin-top:20px">
                <h3 style="margin-bottom: 20px">产量调整明细</h3>
                <el-table
                    :data="tableData1"
                    border
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                >
                    <el-table-column prop="time" sortable label="调整日期"></el-table-column>
                    <el-table-column prop="newNumber" sortable label="实际产量">
                        <template slot-scope="scope">
                            {{scope.row.newNumber}}{{scope.row.units}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="relevantUser" sortable label="调整人"></el-table-column>
                </el-table>
                <el-pagination layout="prev, pager, next" :page-size="pagesize1" @current-change="handleCurrentChange1" :total="total1" :current-page.sync="currentPage1" style="margin-top:20px"></el-pagination>
            </div>
            <div class="container" style="margin-top:20px">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="原料信息" name="1">
                    <el-table
                        :data="tableData2"
                        border
                        ref="multipleTable"
                        header-cell-class-name="table-header"
                    >
                        <el-table-column prop="breedName" sortable label="名称"></el-table-column>
                        <el-table-column prop="inBatch" sortable label="入库批次"></el-table-column>
                        <el-table-column prop="useNumber" sortable label="投入量">
                            <template slot-scope="scope">
                                {{scope.row.useNumber}}{{scope.row.units}}
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination layout="prev, pager, next" :page-size="pagesize2" @current-change="handleCurrentChange2" :total="total2" :current-page.sync="currentPage2" style="margin-top:20px"></el-pagination>
                </el-tab-pane>
                <el-tab-pane label="辅料信息" name="2">
                    <el-table
                        :data="tableData3"
                        border
                        ref="multipleTable"
                        header-cell-class-name="table-header"
                    >
                        <el-table-column prop="breedName" sortable label="名称"></el-table-column>
                        <el-table-column prop="inBatch" sortable label="入库批次"></el-table-column>
                        <el-table-column prop="useNumber" sortable label="投入量">
                            <template slot-scope="scope">
                                {{scope.row.useNumber}}{{scope.row.units}}
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination layout="prev, pager, next" :page-size="pagesize3" @current-change="handleCurrentChange3" :total="total3" :current-page.sync="currentPage3" style="margin-top:20px"></el-pagination>
                </el-tab-pane>
                </el-tabs>
            </div>
            <!-- <div class="container" style="margin-top:20px">
                <h3 style="margin-bottom: 20px">辅料信息</h3>

            </div> -->
            <el-form-item class="footerFixed">
                <el-button @click="backPage">返回</el-button>
            </el-form-item>
        </el-form>
        <big-img v-if="showImg" @clickit="viewImg" :imgSrc="imgSrc"></big-img>
    </div>
</template>

<script>
import BigImg from '../../../common/BigImg.vue';
import {manufacture_findByAllMaterType,manufacture_findById,material_findByList} from "@/request/api";
import uploadImg from '../../../common/uploadImg';
    export default {
        components: {
            uploadImg,
            BigImg
        },
		prop:{},
        data() {
            return {
                imgSrc: '',
                showImg:false,
                activeName: '1',
                ruleForm: {
                },
                tableData1: [],
                tableData2: [],
                tableData3: [],
                total1: 0,
                currentPage1:1,
                pagesize1:10,
                total2: 0,
                currentPage2:1,
                pagesize2:10,
                total3: 0,
                currentPage3:1,
                pagesize3:10,
                listUrl: [],
                listUrl1: [],
                materialTypeStor: ''
            };
        },
        mounted(){
            this.id = this.$route.query.id
            this.init1();
        },
        methods: {
            backPage () {
                this.$router.go(-1);
                // this.$store.commit('setPagNum',this.$route.query.page)
                this.$store.commit('setStorName',this.materialTypeStor)
            },
            // 选择物料类型
            init1(){
                manufacture_findById(this.id).then((res) =>{
                    this.ruleForm = res.data
                    this.tableData1 = res.data.adjustLogList
                    this.tableData2 = res.data.list
                    this.tableData3 = res.data.flList
                    this.materialTypeStor = this.ruleForm.materialType

                    // var date = new Date(res.data.deadLine)
                    // var m = date.getMonth() + 1
                    // m = m < 10 ? '0' + m : m
                    // var d = date.getDate()
                    // d = d < 10 ? '0' + d : d
                    // this.ruleForm.deadLine = date.getFullYear() + '-' + m + '-' + d

                    // 生产场景
                    if (this.ruleForm.sceneUrl != '') {
                        var arr = this.ruleForm.sceneUrl.split(",")
                        this.listUrl = arr
                        this.listUrl = arr.map(t =>{
                            var obj = {}
                            obj.url =this.$store.state.imageUrls + t
                            obj.name = this.$store.state.imageUrls + t
                            return obj
                        })
                    }
                    // 产品图片
                    if (this.ruleForm.productUrl != '') {
                        var arr1 = this.ruleForm.productUrl.split(",")
                        this.listUrl1 = arr1
                        this.listUrl1 = arr1.map(t =>{
                            var obj = {}
                            obj.url =this.$store.state.imageUrls + t
                            obj.name = this.$store.state.imageUrls + t
                            return obj
                        })
                    }
                })
                //   material_findByList({
                //       materialType: '',
                //       page: this.currentPage1,
                //   }).then((res) =>{
                //       this.tableData1 = res.rows
                //       this.total1 = res.total
                //   })
            },
            handleCurrentChange1(val){
                this.currentPage1 = val
                this.init1()
            },
            handleCurrentChange2(val){
                this.currentPage2 = val
                this.init2()
            },
            handleCurrentChange3(val){
                this.currentPage3 = val
                this.init3()
            },
            // tabs
            handleClick(tab, event) {
            },
            handlecheck(row){
                // console.log(row)
                this.showImg = true;
　　　　　　    // 获取当前图片地址
　　　　　　    this.imgSrc = this.$store.state.imageUrls + row;
            },
            viewImg(){
                this.showImg = false;
            },
        }
    }
</script>
<style scoped lang="less">
.demo-ruleForm{
    margin-top: 20px;
}
.el-pagination{
    text-align: center;
}
</style>
